<template>
  <view class="purchaseDetail tn-safe-area-inset-bottom">
    <tn-navbar z-index="2" index-url="/pages/index" fixed :bottom-shadow="false">抢购商品列表</tn-navbar>
    <view class="purchaseDetail-price-tabs">
      <tn-tabs :data="priceTabsData" :current="0" @change="priceTabClick"></tn-tabs>
    </view>
    <view class="purchaseDetail-tabs">
      <tn-tabs :data="tabsData" :current="0" @change="tabClick"></tn-tabs>
    </view>
    <view class="purchaseDetail-content tn-flex-center tn-flex-wrap">
      <tn-water-fall ref="goodsListRef" v-model="goodsList" add-time="50">
        <template v-slot:left="{ data }">
          <purchase-detail-card v-for="(item, index) in data" :key="item.id" :goods="item" @click="goodsClick"
            :member-id="currentMemberId"></purchase-detail-card>
        </template>
        <template v-slot:right="{ data }">
          <purchase-detail-card v-for="(item, index) in data" :key="item.id" :goods="item" @click="goodsClick"
            :member-id="currentMemberId"></purchase-detail-card>
        </template>
      </tn-water-fall>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { onHide, onLoad, onShow } from "@dcloudio/uni-app";
import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
import TnTabs from "@/tuniao-ui/components/tn-tabs/src/Tabs.vue";
import TnWaterFall from "@/tuniao-ui/components/tn-waterfall/src/WaterFall.vue";
import PurchaseDetailCard from "./lib/component/PurchaseDetailCard.vue";
import { TabData } from "@/tuniao-ui/types";
import { PurchaseDetail } from "./lib/types";
import { navPage } from "@/tuniao-ui/utils";
import { findRushPurchaseDetailPage } from "@/api/purchaseDetail";
import { visitRushPurchase } from "@/api/common";
import { useUserStore } from "@/tuniao-ui/store/user";
import { ResultEnum } from "@/enums/httpEnum";
import { loading, closeLoading } from "@/tuniao-ui/utils/messageUtils";

const userStore = useUserStore();

// 活动id 从抢购页传递过来
const purchaseId = ref(0);
const goodsListRef = ref(); // 水平瀑布流组件
const goodsList = ref<PurchaseDetail[]>([]);
const currentPage = ref(1);
const pageSize = ref(30);
const pageTotal = ref(0);
const priceRange = ref({min:0, max:10000}); // 价格区间
// tabs数据
const tabsData = ref<TabData[]>([]);
const priceTabsData = ref<TabData[]>([{
  title:"0w~1w"
},{
  title:"1w~2w"
},{
  title:"2w~3w"
},{
  title:"3w~4w"
},{
  title:"4w+"
}]);

// 记录当前登录id
const currentMemberId = userStore.getId;

// 定时器
let refreshListTimer: number | null | undefined = null;

function priceTabClick(index: any) {
  switch(index) {
    case 0:
      priceRange.value = {min:0, max:10000};
      break;
    case 1:
      priceRange.value = {min:10000, max:20000};
      break;
    case 2:
      priceRange.value = {min:20000, max:30000};
      break;
    case 3:
      priceRange.value = {min:30000, max:40000};
      break;
    case 4:
      priceRange.value = {min:40000, max:100000000};
    default:
        break;

  }
  currentPage.value = 1;
  // 清空数据
  goodsList.value = [];
  goodsListRef.value.clear();
  loading({});
  loadMoreGoods();
}

function tabClick(index: any) {
  currentPage.value = index + 1;
  // 清空数据
  goodsList.value = [];
  goodsListRef.value.clear();
  loading({});
  loadMoreGoods();
}

async function loadMoreGoods() {
  // 如果没有活动id
  if (!purchaseId.value) {
    navPage("/");
  }
  
  let params = { rushPurchaseId: purchaseId.value, ...priceRange.value};

  const { code, result } = await findRushPurchaseDetailPage({
    current: currentPage.value,
    size: pageSize.value,
    ...params,
  });
  if (code === ResultEnum.SUCCESS) {
    closeLoading();
    // 如果有值 就只是更新数据
    if (goodsList.value.length === 0) {
      goodsList.value = goodsList.value.concat(result.records);
    } else {
      // goodsList.value = [];
      // goodsList.value = goodsList.value.concat(result.records);
      // 循环数据修改值
      let goodsList: PurchaseDetail[] = result.records;
      goodsList.forEach(item => {
        goodsListRef.value.modify(item.id, "status", item.status);
      });

    }

    //currentPage.value++;
    //console.log(pageTotal.value);
    let resultTotal = Math.ceil(result.total / result.size);

    // 如果上次计算的总页数和此次的不一样，就刷新tab
    if (pageTotal.value != resultTotal) {
      tabsData.value = [];
      for (let i = 1; i <= resultTotal; i++) {
        tabsData.value.push({ title: i + "页" });
      }
      pageTotal.value = resultTotal;
    }
  }
}

/**
 * 商品单击事件
 * @param goodsId 商品id
 */
function goodsClick(purchaseDetailId: any) {
  navPage("/pages/purchase/purchaseGoods?purchaseDetailId=" + purchaseDetailId);
}

onLoad((options: any) => {
  purchaseId.value = options.purchaseId;
  visitRushPurchase({rushPurchaseId : purchaseId.value, memberId : currentMemberId});
});
onShow(() => {
  loadMoreGoods();
  //2.5秒自动刷一次
  refreshListTimer = setInterval(() => {
    console.log("开始定时");
    // 清空数据
    //goodsList.value = [];

    if (goodsListRef.value === null) {
      clearInterval(refreshListTimer);
      return;
    }
    //goodsListRef.value.clear();
    // 获取新数据
    loadMoreGoods();
  }, 2500);
});
onHide(() => {
  // 清除定时器
  clearInterval(refreshListTimer);
})
</script>
yarn
<style lang="scss" scoped>
.purchaseDetail-price-tabs {
  position: fixed;
  top: 80rpx;
  display: flex;
  z-index: 99;
  width: 100%;
}
.purchaseDetail-tabs {
  position: fixed;
  top: 160rpx;
  display: flex;
  z-index: 99;
  width: 100%;
}
.purchaseDetail-content {
  margin-top: 160rpx;
}
</style>
